<div class="workbench" [ngClass]="{'workbenchAuto':fnWorkbench}">

  <div *ngIf="fnWorkbench" class="assistant-tabset">
    <apes-tabset [apesType]="'card'" [(apesSelectedIndex)]=selectIndex (apesSelectChange)="checkTabs($event)">
      <apes-tab apesTitle="仪表盘"></apes-tab>
      <apes-tab apesTitle="车辆总控"></apes-tab>
    </apes-tabset>
  </div>

  <ng-container *ngIf="selectIndex == 0">

    <div apes-row>

      <!--待办-->
      <div apes-col [apesSpan]="fnWorkbench? 12 : 24" style="padding: 0">

      <!--  bodyHeight  =  header-hg(64px) +  apes-header-hg(50px) + padding(16px) + bodyHeader(48px) +_ 2px-->
        <apes-card [apesTitle]="getTodoTitle()"
                   [apesExtra]="cardTemplate"
                   [apesBodyStyle]="{height : fnWorkbench? '41vh' : 'calc(100vh - 180px)'}">

          <ng-template #cardTemplate>
            <div style="margin-right: 16px;">
              <button apes-button apesType="primary" (click)="exportExcel()">导出</button>
            </div>
          </ng-template>

          <div apes-row class="todo-condition-row">
            <div apes-col [apesSpan]="fnWorkbench? 8 : 5" class="todo-condition-col">
              <apes-input-group [apesPrefix]="prefixIconSearch" [apesSuffix]="suffixIconClear">
                <input apes-input
                       placeholder="可输入相关单号/车牌/备注搜索"
                       type="search"
                       (keyup)="searchKeywords($event)"
                       [(ngModel)]="searchValue"
                       class="todo-condition-search-input">
              </apes-input-group>
              <ng-template #prefixIconSearch>
                <img [src]="'./assets/tmp/img/fn/search.png'"/>
              </ng-template>
              <ng-template #suffixIconClear>
                <i apes-icon apesType="close-circle" *ngIf="searchValue != null && searchValue != ''"
                   (click)="showToDoListData()"></i>
              </ng-template>
            </div>

            <div apes-col [apesSpan]="fnWorkbench? 7 : 4" class="todo-condition-col">
              <span class="todo-condition-toDoType-title">待办：</span>
              <div class="todo-condition-toDoType-select">
                <ng-select [items]="toDoTypeItem" bindLabel="name" [(ngModel)]="processType"
                           (change)="changeSort()"></ng-select>
              </div>
            </div>

            <div apes-col [apesSpan]="fnWorkbench? 7 : 4" class="todo-condition-col">
              <span class="todo-condition-toDoType-title">排序：</span>
              <div class="todo-condition-toDoType-select">
                <ng-select [items]="sortItem" bindLabel="name" [(ngModel)]="sortType"
                           (change)="changeSort()"></ng-select>
              </div>
            </div>

          </div>

          <div apes-row class="todo-condition-row">
            <div apes-col [apesSpan]="24" class="todo-condition-col">

              <apes-checkbox-wrapper style="width: 100%;">
                <!--        <apes-checkbox-wrapper style="width: 100%;" (apesOnChange)="changShowItemType()">-->
                <div apes-row>
                  <div class="todo-condition-checkbox" apes-col [apesSpan]="4">
                    <label apes-checkbox
                           (ngModelChange)="selectShowALlItemType()"
                           [apesIndeterminate]="indeterminate"
                           [(ngModel)]="showAllItemType">
                      <span style="position: relative;top: 3px;">全部</span>
                    </label>
                  </div>
                  <div *ngFor="let item of showItemType;let i = index;" class="todo-condition-checkbox" apes-col
                       [apesSpan]="4">
                    <label *ngIf="i < 5|| showMore" apes-checkbox
                           [(ngModel)]="item.checked" (ngModelChange)="changShowItemType()">
                      <span style="position: relative;top: 3px;">{{item.name}}</span>
                    </label>
                  </div>
                </div>
              </apes-checkbox-wrapper>
            </div>
            <div apes-col [apesSpan]="24" class="todo-condition-col">
              <div *ngIf='showItemType.length>5' (click)="showMore = !showMore" class="apes-query-showMore-btn">
                <i *ngIf="showMore == true" apes-icon [apesType]="'double-left'" [apesRotate]="90"></i>
                <i *ngIf="showMore == false" apes-icon [apesType]="'double-right'" [apesRotate]="90"></i>
              </div>
            </div>
          </div>

          <!--        [ngStyle]="{height: fnWorkbench? '27vh' : '63vh', overflow: 'auto'}"-->
          <div class="home-table"
               [ngClass]="{'home-table-fnWorkbench':fnWorkbench}">

            <apes-table #basicTable
                        [apesData]="showData"
                        [apesShowPagination]="false"
                        apesSize="small"

                        class="home-page-table"
                        apesBordered>
              <thead>
              <tr>
                <th style="width: 30%;" class="todo-th">单号</th>
                <!--              <th style="width: 16%;" class="todo-th">单据</th>-->
                <th style="width: 18%;" class="todo-th">待办节点</th>
                <th style="width: 12%;" class="todo-th">倒计时</th>
                <th style="width: 10%;" class="todo-th">车牌</th>
                <th style="width: 30%;" class="todo-th">备注</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let data of showData; let i = index;">
                <!--              <td style="width: 16%;" class="todo-td-l">-->
                <!--                <span class="todo-td-business" (click)="selectData(data)">{{data.businessKey}}</span>-->
                <!--              </td>-->
                <!--              <td style="width: 16%;" class="todo-td-l">{{data.itemType}}</td>-->
                <td style="width: 30%;" class="todo-td-l">
                  <span class="todo-td-business" (click)="selectData(data)">{{data.businessKey}}</span>
                  <span>{{data.itemType}}</span>
                </td>
                <td style="width: 18%;" class="todo-td-l">
                                    <span class="todo-td-tip"
                                          [ngClass]="showProcessClass(data.processType)">{{data.processType}}</span>
                  {{data.todoNode}}
                </td>
                <td style="width: 12%;" class="todo-td-c"
                    [ngClass]="showTimeClass(data)" [innerHTML]="showCountDown(data)"></td>
                <td style="width: 10%;" class="todo-td-c">{{data.carLicense}}</td>
                <td style="width: 30%;" class="todo-td-l">
                  <ul class="todo-td-ul">
                    <li *ngFor="let remark of data.contentData">{{remark}}</li>
                  </ul>
                </td>
              </tr>
              </tbody>
            </apes-table>
          </div>

        </apes-card>

      </div>

      <div apes-col *ngIf="fnWorkbench" [apesSpan]="fnWorkbench? 12 : 0" style="padding: 0 0 0 4px">

        <apes-card [apesTitle]="btnTemplate" [apesBodyStyle]="{height : '41vh',overflow: 'auto'}">
          <ng-template #btnTemplate>
            <div class="fnWorkbenchMessage-btn">
              <apes-radio-group [(ngModel)]="fnWorkbenchMessage">
                <label apes-radio-button apesValue="endItem" (click)="refreshItem()">
                  <span>未完结事项</span>
                  <i apes-tooltip class="fnWorkbenchPlanState-tooltip"
                     [apesTooltipTrigger]="'hover'"
                     [apesTooltipTitle]="endItemTemplate" apes-icon apesType="info-circle"></i>
                  <ng-template #endItemTemplate>
                    <div>每十分钟更新数据，可手动点击获取最新数据</div>
                  </ng-template>
                </label>
                <label apes-radio-button apesValue="messageItem" (click)="refreshItem()">
                  <span>库存通知</span>
                  <i apes-tooltip class="fnWorkbenchPlanState-tooltip"
                     [apesTooltipTrigger]="'hover'"
                     [apesTooltipTitle]="messageItemTemplate" apes-icon apesType="info-circle"></i>
                  <ng-template #messageItemTemplate>
                    <div>每十分钟更新数据，可手动点击获取最新数据</div>
                  </ng-template>
                </label>
              </apes-radio-group>
            </div>
          </ng-template>

          <div *ngIf="fnWorkbenchMessage == 'endItem'" class="fnWorkbenchMessage-endItem">
            <div>
              <apes-spin *ngIf="endItemIsLoading" apesSimple [apesSize]="'large'" class="endItem-spin"></apes-spin>
            </div>
            <ng-container *ngIf="!endItemIsLoading">
              <div *ngFor="let item of endItem" class="fnWorkbenchMessage-endItem-main">
                <div class="endItem-title">{{item.name}}</div>
                <div class="endItem-context">
                  <apes-collapse [apesBordered]="false">
                    <apes-collapse-panel
                      *ngFor="let panel of item.context"
                      [apesHeader]="panelTemplate"
                      [apesActive]="panel.active? panel.active : true">

                      <ng-template #panelTemplate>
                        <div class="endItem-context-title">
                          <span>{{panel.name}}</span>
                          <span>总计{{panel['count']}}</span>
                        </div>
                      </ng-template>

                      <div *ngFor="let pan of panel.context">
                        <div class="endItem-context-main" (click)="openContextDrawer(pan)">
                          <span>{{pan['ORDER_TYPE']}}</span>
                          <span class="endItem-context-text">{{pan['COUNT']}}</span>
                        </div>
                      </div>
                    </apes-collapse-panel>
                  </apes-collapse>
                </div>
              </div>
            </ng-container>
          </div>

          <div *ngIf="fnWorkbenchMessage == 'messageItem'" class="fnWorkbenchMessage-messageItem">
            <div>
              <apes-spin *ngIf="messageItemIsLoading" apesSimple [apesSize]="'large'"
                         class="messageItem-spin"></apes-spin>
            </div>
            <ng-container *ngIf="!messageItemIsLoading">
              <div class="fnWorkbenchMessage-messageItem-title">
                                    <span>
                                      <i apes-icon apesType="bell" [apesTheme]="'fill'"></i>
                                      库存提醒
                                    </span>
                <span>
                                      ({{checkMessageItemCount()}})
                                    </span>
              </div>
              <div *ngFor="let item of messageItem" class="fnWorkbenchMessage-messageItem-main"
                   (click)="openContextDrawer(item)">
                <div class="fnWorkbenchMessage-messageItem-name">
                  <div class="fnWorkbenchMessage-img">
                    <img [src]="fnWorkbenchImg(item)" alt="">
                  </div>
                  <div>{{item.name}}</div>
                </div>
                <div class="fnWorkbenchMessage-messageItem-count">{{item.count}}</div>
              </div>
            </ng-container>
          </div>

        </apes-card>

      </div>

      <div apes-col *ngIf="fnWorkbench" [apesSpan]="fnWorkbench? 24 : 0" style="padding: 0">

        <apes-card [apesTitle]="'常用功能入口'" [apesBodyStyle]="{height : '13vh',overflow: 'auto'}">
          <div class="fnWorkbenchMenu">
            <div *ngFor="let menu of fnWorkbenchMenu"
                 class="fnWorkbenchMenu-main"
                 (click)="openContextLink(menu)">
              <div class="fnWorkbenchMenu-img">
                <img [src]="fnWorkbenchImg(menu)" alt="">
              </div>
              <div class="fnWorkbenchMenu-title">{{menu.name}}</div>
            </div>
          </div>
        </apes-card>

      </div>

      <div apes-col *ngIf="false" [apesSpan]="fnWorkbench? 24 : 0" style="padding: 0">

        <apes-card [apesTitle]="stateTitleTemplate"
                   [apesExtra]="stateTemplate"
                   [apesBodyStyle]="{height : '13vh',overflow: 'auto'}">

          <ng-template #stateTitleTemplate>
            <span>方案状态</span>
            <i apes-tooltip class="fnWorkbenchPlanState-tooltip"
               [apesTooltipTrigger]="'hover'"
               [apesTooltipTitle]="stateTooltipTemplate" apes-icon apesType="info-circle"></i>
            <ng-template #stateTooltipTemplate>
              <div>每十分钟更新数据，可手动点击刷新获取最新数据</div>
            </ng-template>
          </ng-template>

          <ng-template #stateTemplate>
            <div style="margin-right: 16px;">
              <button apes-button apesType="primary" (click)="refreshMenuState()">刷新
              </button>
            </div>
          </ng-template>

          <div class="fnWorkbenchPlanState">
            <div *ngFor="let state of fnWorkbenchPlanState"
                 class="fnWorkbenchMenu-main"
                 (click)="openContextDrawer(state)">
              <div class="fnWorkbenchMenu-img">
                <img [src]="fnWorkbenchImg(state)" alt="">
              </div>
              <div class="fnWorkbenchMenu-title">{{state.name}}({{state.value ? state.value : 0}})</div>
            </div>
          </div>
        </apes-card>

      </div>

      <div apes-col *ngIf="fnWorkbench" [apesSpan]="fnWorkbench? 24 : 0" style="padding: 0;overflow: hidden;">

        <apes-card [apesTitle]="assistantTitleTemplate">
          <ng-template #assistantTitleTemplate>
            <div class="assistant-title-template">
              <span>门店助手</span>
              <i apes-tooltip class="fnWorkbenchPlanState-tooltip"
                 [apesTooltipTrigger]="'hover'"
                 [apesOverlayClassName]="'assistant-tooltip'"
                 [apesTooltipTitle]="assistantTooltipTemplate" apes-icon apesType="info-circle"></i>
              <ng-template #assistantTooltipTemplate>
                <div class="assistant-tooltip">
                  <p>门店助手</p>
                  数据约10分钟更新一次<br>
                  <span>在店中</span><br>
                  <span>接车</span><br>
                  在店车辆：在店车辆为累计至今进店接车不包含内协出去的的车辆数量<br>
                  内协车辆：累计至今发起内协交车且未确认收车的数量<br>
                  待开单：累计至今门店已经接车未创建方案或定损单的数量<br>
                  <span>方案</span><br>
                  报价中：累计至今门店发起报价单未完成报价数量（不包含退回的）<br>
                  询价退回：累计至今门店发起报价单报价结果为退回的数量<br>
                  审批中：累计至今门店发起价格审批未完成审批数量（不包含退回的）<br>
                  退回：累计至今门店发起价格审批结果为退回的数量<br>
                  待确认：累计至今门店方案单已经提交未做确认的单据数量<br>
                  <span>车间</span><br>
                  待领用：累计至今门店方案单未做配件领用的单据数量<br>
                  待施工：未开始施工的单据数量<br>
                  施工中：正在车间进行施工的单据数量<br>
                  暂停施工：施工途中暂时终止施工<br>
                  待质检：施工完成的未做质检单据数量<br>
                  待收款：已经质检完成未做收银操作<br>
                  待交车：该车辆名下的单据均已收款完成<br>
                  <span>库房</span><br>
                  未审核：累计至今门店发起要货单未审核的要货数量<br>
                  未配货：累计至今门店发起要货单未分配的要货数量<br>
                  未到货：累计至今门店发起要货单总仓/中转站已发货未到货的要货数量<br>
                  <span>离店</span><br>
                  未接算交车：单据没做收款操作，但车已不在店<br>
                </div>
              </ng-template>
              <span class="assistant-title">
                每十分钟更新一次，可点击"<b (click)="refreshAssistant()">刷新</b>"查看
              </span>
            </div>
          </ng-template>

          <div style="padding: 10px 20px;">
            <ng-container *ngFor="let items of assistantItems;let i = index;">
              <div class="assistant-time-line" apes-row [ngClass]="checkAssistantClass(i)">
                <ng-container *ngFor="let item of items;let l = index;">
                  <div *ngIf="i == 0 && l == 0" class="assistant-time-start">
                    <i apes-icon apesType="car"></i>
                  </div>
                  <div class="assistant-time-content" apes-col [apesSpan]="checkSpan(items.length)">
                    <div class="assistant-time-text">
                      <div class="assistant-time-title">
                        <div class="assistant-img">
                          <img [src]="item.img" alt="">
                        </div>
                        <div class="assistant-title-name">{{item.groupName}}</div>
                      </div>
                      <div apes-row>
                        <ng-container *ngFor="let res of item['detail'];">
                          <div apes-col
                               [apesSpan]="checkMainSpan(item['detail'].length)"
                               class="assistant-main"
                               title="{{res['detailName']}}{{res['total']}}{{res['unitName']}}"
                               (click)="checkAssistant(res)">
                            <span>{{res['detailName']}}</span>
                            <span class="assistant-main-total"
                                  *ngIf="res.hasOwnProperty('total')">{{res['total']}}</span>
                            <span class="assistant-main-total" *ngIf="!res.hasOwnProperty('total')">
                              <i apes-icon apesType="sync" apesTheme="outline" [apesSpin]="true"></i>
                            </span>
                            <span>{{res['unitName']}}</span>

                          </div>
                        </ng-container>
                      </div>
                    </div>
                  </div>
                  <div *ngIf="i == assistantItems.length - 1 && l == items.length - 1 " class="assistant-time-end">
                    <i apes-icon apesType="check-circle"></i>
                  </div>
                </ng-container>
              </div>
            </ng-container>
          </div>

        </apes-card>

      </div>

    </div>
  </ng-container>

  <ng-container *ngIf="selectIndex == 1">
    <div class="assistant-carControl">

      <div apes-row>
        <div apes-col [apesSpan]="showCarMore? 12 : 24" class="assistant-carControl-left">

          <!--查询区-->
          <div apes-row [apesGutter]="16" style="padding: 4px 4px 4px 16px;">
            <formly-form [model]="carControlModel" [fields]="carControlField"></formly-form>
            <div apes-col [apesSpan]="4">
              <button apes-button [apesSize]="'default'"
                      [apesLoading]="carControlLoading"
                      (click)="refreshCarControlItem()">查询
              </button>
            </div>
          </div>

          <!--展示区-->
          <div apes-row [apesGutter]="16">
            <div *ngFor="let total of carControlTotal; let i = index;"
                 apes-col [apesSpan]="6">
              <div class="assistant-carControl-total" (click)="filterCarControlItem(carControlTotal,i)"
                   [ngClass]="{'activate': total['activate']}"
                   [ngStyle]="{'color':checkCarState(total.remark)}">
                <div>{{total.remark}}</div>
                <div>{{total.TOTAL}}</div>
              </div>
            </div>
          </div>

          <div class="assistant-carControl-container">
            <ng-container *ngIf="showCarControlItem.length != 0">
              <div *ngFor="let car of showCarControlItem;let i = index;"
                   class="assistant-carControl-item"
                   [ngClass]="{'showCarMore':showCarMore}">
                <div class="assistant-carControl-main">

                  <div class="assistant-carControl-title">
                    <div class="carControl-title-left">
                      <div class="carControl-car-logo">
                        <img [src]="car.logo" alt="">
                      </div>
                      <div class="carControl-car-title">
                        <span class="carControl-car-license">{{car.CAR_LICENSE}}</span>
                        <span class="carControl-customer-name">{{car.CUSTOMER_NAME}}</span>
                        <div class="carControl-btn">
                          <button apes-button [apesSize]="'default'" (click)="carMoreBtn(car)">
                            到店记录详情
                          </button>
                        </div>
                      </div>
                    </div>
                    <div class="carControl-title-right">
                      <apes-tag [apesColor]="checkCarState(car.STATE)">{{car.STATE}}</apes-tag>
                    </div>
                  </div>

                  <div class="assistant-carControl-content">
                    <p class="p-text">
                      <i apes-icon apesType="user" class="carControl-content-icon"></i>
                      接车：{{car.GET_CAR_DATE}}
                    </p>
                    <p class="carControl-dept p-text">
                          <span>
                            <i apes-icon apesType="home" class="carControl-content-icon"></i>
                            门店：{{car.DEPT}}
                          </span>
                      <span>
                            <i apes-icon apesType="history" class="carControl-content-icon"></i>
                        {{car.timeConsume}}
                          </span>
                    </p>
                  </div>


                  <div class="assistant-carControl-footer">

                    <div *ngIf="car['cardDetail'] && car.cardDetail.length != 0 && !checkCarShowData(car)"
                         class="carControl-footer-main" [ngClass]="{'showCar':!checkCarShowData(car)}">
                      <div *ngFor="let card of car.cardDetail" class="footer-main">
                        <div class="carControl-card-logo">
                          <img [src]="checkCardImg(card.PLAN_STATE)" alt="">
                        </div>

                        <div class="carControl-card-main">

                          <div class="card-main-top">
                            <div class="card-main">
                              <div>{{card.ID}}</div>
                              <div class="card-main-state">
                                <apes-tag [apesColor]="checkCardState(card.STATE_COLOR)">{{card.STATE}}</apes-tag>
                                <ng-container *ngFor="let tab of card.TAB;let i = index">
                                  <apes-tag *ngIf="i <= 3" [apesColor]="'#fff'"
                                            class="card-main-tab">{{tab}}</apes-tag>
                                </ng-container>
                              </div>
                            </div>
                            <div class="card-amount">¥{{card.TOTAL_AMOUNT}}</div>
                          </div>

                          <div class="card-main-bottom">创建时间：{{card.CREATE_DATE}}</div>

                        </div>
                      </div>
                    </div>

                    <div *ngIf="!car.hasOwnProperty('msg')"
                         [ngClass]="{'showCar':!checkCarShowData(car)}"
                         class="carControl-showMore">
                      <div *ngIf="checkCarShowData(car)" (click)="carShowMore(car)"
                           class="carControl-showMore-btn">
                        <span>预览</span>
                        <i apes-icon [apesType]="'double-right'" [apesRotate]="90"></i>
                      </div>
                      <div *ngIf="!checkCarShowData(car)" (click)="carShowMore(car)"
                           class="carControl-showMore-btn">
                        <span>收起</span>
                        <i apes-icon [apesType]="'double-left'" [apesRotate]="90"></i>
                      </div>
                    </div>

                    <div *ngIf="car.hasOwnProperty('msg')" class="carControl-msg">
                      <div class="carControl-msg-img">
                        <img [src]="checkCarMsg(car.msg)" alt="">
                      </div>
                      <ng-container *ngIf="car.msg == '暂时没有业务。如需做单请开单!'">
                        <div class="carControl-msg-text">
                          暂时没有业务。如需做单“
                          <span (click)="openToBill(car)">请开单</span>
                          ”!
                        </div>
                      </ng-container>
                      <ng-container *ngIf="car.msg == '你太棒了，此车业务已处理完毕，赶紧通知客户取车吧！'">
                        <div class="carControl-msg-text">{{car.msg}}</div>
                      </ng-container>

                    </div>
                  </div>

                </div>
              </div>
            </ng-container>
            <ng-container *ngIf="showCarControlItem.length == 0">
              <apes-empty style="text-align: center"></apes-empty>
            </ng-container>
          </div>

        </div>

        <dialog-carControl *ngIf="showCarMore" apes-col [apesSpan]="12"
                           class="assistant-carControl-right"
                           (closeDialog)="closeCarMore($event)"
                           [data]="carMoreData"></dialog-carControl>

      </div>
    </div>
  </ng-container>

</div>
